<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的第一个前端页面</title>
	</head>
	<body>
    <div id="app">
        <!-- 字符串 -->
        {{msg}}
        
        <!-- 对象 -->
        {{ obj.name }}
        
        <!-- 函数 -->
        {{ fun() }}
        
        <!-- 运算符 -->
        {{ num>0? 'num大于0': 'num小于等于0' }}
        
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //引入vue.js之后内存中就多了Vue构造函数
        //new出来的vm实例对象就是 MVVM中的VM层，核心层！
        var vm = new Vue({
            el:'#app',  //表示new的vue实例要控制页面上的哪块区域
            data:{
                //MVVM中的M层
                //存放的是el中要用到的数据
                msg:'Hello World',
                obj: {
                    'name': "张三"
                },
                fun: function () {
                    return 2**10
                },
                num: 1
            }
        })
    </script>

	</body>
</html>